<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no" />
    <link rel="dns-prefetch" href="//static.matouapp.ymatou.com">
    <link rel="dns-prefetch" href="//staticontent.matouapp.ymatou.com">
    <link rel="dns-prefetch" href="//staticwap.ymatou.com">
    <link rel="shortcut icon" type="image/x-icon" href="http://staticontent.ymatou.com/ymtapp/matouapp.ico" />
    <title>洋码头-结算页</title>
    <script data-js-path="redraw.js">
     !(function(relWinth,relFontSize){var ua=navigator.userAgent,isIos=/iphone|ipad|ipod/i.test(ua),isMobile=/Mobile/i.test(ua);var meta=document.querySelector("[name=viewport]")||(function(){var _meta=document.createElement("meta");_meta.name="viewport"})(),content=meta.content||"",matchScale=content.match(/initial\-scale=([\d\.]+)/),matchWidth=content.match(/width=([\d\.]+)/),dpr=isIos?window.devicePixelRatio?Math.min(window.devicePixelRatio,3):1:1,docEl=document.documentElement,maxWidth=dpr*(docEl.dataset.mw||750),scale=1/dpr,tid;relWinth=relWinth||320;relFontSize=relFontSize||16;if(meta){if(matchScale){content=content.replace(/initial\-scale=([\d\.]+)/,"initial-scale="+scale).replace(/minimum\-scale=([\d\.]+)/,"minimum-scale="+scale).replace(/maximum\-scale=([\d\.]+)/,"maximum-scale="+scale)}else{content+=",initial-scale="+scale}meta.content=content}else{meta=doc.createElement("meta");meta.name="viewport";meta.content=content;docEl.firstElementChild.appendChild(meta)}var redraw=function(){var width=docEl.getBoundingClientRect().width;var fz=Math.min(width,maxWidth)/relWinth*relFontSize;docEl.style.fontSize=fz+"px"};if(isMobile){window.addEventListener("resize",function(){clearTimeout(tid);tid=setTimeout(redraw,300)},false);redraw()}else{docEl.style.fontSize="16px"}})(375,16);
    </script>
    <!-- build:css /styles/index.css-->
    <link rel="stylesheet" type="text/css" href="/styles/main.css">
    <!-- endbuild-->
    <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
</head>
<body what-system>
    <section class="settle-container ng-cloak" ng-controller="preOrderApp.controller.index">
        <!--收件地址-->
        <address class="address-wrapp ng-cloak" ng-click="openAddress()" ng-if="orderInfo.Orders">
            <h3 ng-if="orderInfo.Orders && orderInfo.Orders[0] && orderInfo.Orders[0].Address.AddressId" >收件人: {{orderInfo.Orders[0].Address.Addressee}} <span class="fr">{{orderInfo.Orders[0].Address.Mobile}}</span></h3>
            <div ng-if="orderInfo.Orders && orderInfo.Orders[0] && orderInfo.Orders[0].Address.AddressId" >
                {{orderInfo.Orders[0].Address.Area}} {{orderInfo.Orders[0].Address.DetailAddress}}
            </div>
            <div class="add-address" ng-if="!(orderInfo.Orders && orderInfo.Orders[0] && orderInfo.Orders[0].Address.AddressId)">
                添加收件地址
            </div>
            <i class="icon-arrow-right"></i>
        </address>
        <div class="customs-wrapper ng-cloak" ng-if="isUploadIdCard && hasBonded">
            <div class="customs-title-wrapper">
                <!-- status change: fixed-->
                <div class="customs-title" overflow-fixed="fixed">
                    <i class="icon-customs"></i> 海关提示:购买保税商品需要提供收货人身份证号码
                </div>
            </div>
            <div class="customs-input" ng-class="{error:idCardError}">
                <input type="text" ng-model="idCard.no" name="" value=""
                        maxlength="18" placeholder="请录入16位身份证号" ng-blur="validateIdcard()">
                <span class="msg-text ng-cloak">请输入正确的身份证号码</span>
            </div>
        </div>
        <!--商品列表-->
        <div class="buyer-list-wrapp ng-cloak">
            <div class="buyer-item" ng-repeat="i in orderInfo.Orders">
                <div class="buyer-item-hd">
                    <i class="spot-goods-flag">现</i><strong>{{i.SellerName}}</strong>
                </div>
                <ul class="buyer-item-bd pro-list">
                    <!--遍历商品-->
                    <li ng-repeat="p in i.Products">
                        <div class="pic">
                            <div class="pic-carrier" ng-style="{'background-image':'url('+p.PictureUrl+')'}"></div>
                        </div>
                        <div class="info">
                            <h4> <span class="freight-discount" ng-if="logisticsConversion(p)">{{logisticsConversion(p)}}</span>{{p.ProductName}}</h4>
                            <p ng-if="p.CatalogPropertyList && p.CatalogPropertyList[0]">商品规格: <span class="prop" ng-repeat="catalogProp in p.CatalogPropertyList">{{catalogProp.PropertyAttribute}}</span></p>
                            <p>
                                <span class="pro-flag local-return" ng-if="1"><i class="icon-local-return"></i>本土退货</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==1"><i class="icon-domestic-post"></i>国内快递</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==2"><i class="icon-zhiyou"></i>直邮</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==3"> <i class="icon-beihai-directMail"></i>贝海直邮</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==4"> <i class="icon-seller-bonded"></i>卖家保税</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==5"><i class="icon-beihai-bonded"></i>贝海保税</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==6"><i class="icon-authentic-zhiyou"></i>认证直邮</span>
                                <span class="pro-flag xloboBoned" ng-if="p.CatalogStatus==7"><i class="icon-pingyou"></i>拼邮</span>
                            </p>
                            <div class="attr">
                                <strong>&yen;{{p.QuotePrice.toFixed(2)}}</strong>
                                <div class="discount" ng-if="p.OriginPrice && p.OriginPrice != p.QuotePrice">已享折扣</div>
                                <div class="num">x{{p.ProductNumber}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="settle-count">
                    <div><b>共 {{i.ProductNumber}} 件商品</b>合计：<span class="price price-num">&yen;<strong>{{(totalPrice(i)+totalFreight(i)).toFixed(2)}}</strong></span></div>
                    <div class="freight-total">(含运费：<span class="price-num">&yen;<strong>{{totalFreight(i).toFixed(2)}}</strong></span>)</div>
                </div>
                <div class="buyer-ft">
                    <!--优惠-->
                    <div class="discount-wrapper ng-cloak" ng-if="i.Promotion.CanUseCoupon||i.Promotion.CanUseGift||i.Promotion.CanUseFreeCard">
                        <div class="discount-hd">
                             选择优惠方式
                        </div>
                        <ol class="discount-list swiper-container" ng-init="canUseGift(i)">
                            <!--stauts change : disabled -->
                            <li class="gift-wrapper" ng-if="i.Promotion.CanUseGift" ng-class="{'disabled':i.Promotion.CanUseGift && i.usedGift==0}"
                            ng-click="useGift(i)" ng-init="i.PromotionUsed.UseGiftAmount = 0">
                                <label class="fl"><i class="icon-checkBox" ng-class="{'icon-checkBox-selected':couponType === 3}"></i></label><span class="label">
                                    红包 余额 &yen;{{orderInfo.AvailableGiftAmount}}
                                </span>
                                <div class="sub-label">
                                    最多抵扣本次支付金额的50%
                                </div>
                                <span class="discount-desc" ng-if="couponType === 3">{{i.useCouponDesc}}</span>
                            </li>
                            <li ng-if="i.Promotion.CanUseCoupon" ng-class="{'disabled':!couponsList[0]}">
                                <!--stauts change : selected-->
                                <label ng-click="switchCoupon(i)"><i class="icon-checkBox" ng-class="{'icon-checkBox-selected':couponType === 1}"></i></label><span class="label">优惠券</span>
                                <span class="select-group">
                                    <select ng-model="coupon.selectCouponIndex"
                                            ng-change="selectCoupon(act,$index)"
                                            ng-options1="$index as ('满' +act.CouponOrderValue + (act.UseType == 1 ? '抵' : '返') + act.CouponValue)  for act in couponsList"
                                            ng-disabled="couponType === 3 || couponType === 2 || !(couponsList && couponsList.length)">
                                        <option value="0" ng-if="!couponsList[0]">没有可使用的优惠券</option>
                                       <option value="{{$index}}"
                                               ng-repeat="cl in couponsList">{{'满' + cl.CouponOrderValue + (cl.UseType == 1 ? '抵' : '返') + cl.CouponValue}}</option>
                                    </select>
                                    <span class="coupon-select" ng-click1="openUserCoupon(i)">{{i.useDiscount||''}} <i class="icon-arrow-down"></i></span>
                                </span>

                                <span class="discount-desc" ng-if="couponType === 1">{{i.useCouponDesc}}</span>
                            </li>
                            <li ng-if="i.Promotion.CanUseCoupon" >
                                <label ng-click="switchInputCoupon(i)">
                                    <i class="icon-checkBox"
                                       ng-class="{'icon-checkBox-selected':couponType === 2}"></i>
                                </label><span class="label">优惠码: </span>
                                <input class="coupon-code"
                                        type="text"
                                        name="coupon.code"
                                        value=""
                                        placeholder="输入优惠码"
                                        ng-model="coupon.code"
                                        ng-focus="state.inInput = true"
                                        ng-input="state.inInput = true"
                                        ng-blur="confirmInputCoupon(i);state.inInput=false"
                                        ng-focus="inInput = true"
                                        ng-disabled="couponType === 1 && couponType === 2"
                                        get-focus="couponType === 2">
                                <span class="discount-desc" ng-if="couponType === 2">{{i.useCouponDesc}}</span>
                            </li>
                        </ol>
                    </div>
                    <!--留言-->
                    <div class="leaveMessage">
                        <textarea ng-model="leaveMessage.content" placeholder="给卖家留言~"
                                maxlength="80" adapt-textarea-minheight="2.09" row="4"
                                ng-focus="state.inInput = true"
                                ng-blur="state.inInput = false"></textarea>
                        <label for="">留言:</label>
                    </div>
                    <div class="declare">
                        <a ng-click="openEntrust()">我已授权委托洋码头申报海关购买海外商品</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="preorder-no-result" ng-if="load && ((orderInfo && !orderInfo.Orders[0]) || !orderInfo)">
            <div class="no-result-bg"></div>
            <div calss="no-result-text">
                <p>哈尼~非常抱歉</p>
                <p>该商品状态已变更，请返回重试。</p>
            </div>
        </div>
        <div class="settle-tools-wrapper">
            <div class="settle-tools" ng-class="{'reRelative':state.inInput}">
                <div class="text">
                   <!--  <div>
                       共计 {{productNumber || 0}} 件商品,合计:<strong>&yen;{{ orderInfo.TotalPrice || 0 }}</strong>
                   </div>
                   <div class="a">
                       <small>含运费: &yen;{{orderInfo.TotalFreight || 0 }}   优惠扣除: - &yen;{{discountPrice}} </small>
                   </div> -->
                    <span class="fl total">共 {{productNumber || 0}} 件</span>
                    <strong>需支付: {{ orderInfo.TotalPrice || 0 }}</strong>
                </div>
                <button class="btn btn-primary" type="button" ng-click="saveOrder()" ng-class="{'btn-invalid':!canSubmint}">{{isPay?'提交中...':'立即购买'}}</button>
            </div>
        </div>

        <div class="dialog-mask ng-cloak" ng-class="{open:maskOpen}" ng-click="closeMask()"  stop-propagation="touchmove"></div>

        <div class="dialog ng-cloak dialog-area dialog-select-wrapper" ng-class="{open:couponOpen}"  stop-propagation="touchmove">
            <div class="dialog-content">
                <div class=" discount-list-wrapper">
                    <div class="title-wrapper">
                        <div class="title" disabled-scroll="">共有{{couponsList.length || 0}}张优惠券</div>
                    </div>
                    <ul class="my-discount-list">
                        <!--statuc change: disabled-->
                        <li class="my-discount-item" ng-repeat="i in couponsList" ng-click="selectCoupon(i,$index)"
                            ng-class="{selected:selectCouponIndex===$index}">
                            <h3>满{{i.CouponOrderValue}}{{(i.UseType==1?"抵":"返")}}{{i.CouponValue}}</h3>
                            <p>有效期至 {{i.ValidEnd}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="dialog ng-cloak dialog-area  entrust-wrapper" ng-class="{open:entrustOpenStatus}">
            <div class="dialog-content">
                <div class="title">
                   个人申报委托协议
                </div>
                <div class="content">
                    本人承诺所购买商品系个人合理自用，现委托商家及其合作伙伴代理申报、代缴税款等通关事宜，本人保证遵守《海关法》和国家相关法律法规，保证所提供的身份信息和收货信息真实完整，无侵犯他人权益的行为，以上委托关系系如实填写，本人充分了解相应法律法规并愿意接受海关、检验检疫机构及其他监管部门的监管，并承担相应法律责任。
                </div>
                    <button class="btn full-btn btn-primary" ng-click="closeMask()">关闭</button>
            </div>
        </div>

        <div class="address-mask-fix ng-cloak" ng-class="{open:!!addressState}" ng-click="closeAddressState()" disabled-scroll="">
            <div class="address-mask-close">
                <i class="icon-arrow-right"></i>
            </div>
        </div>

        <!--地址管理-->
        <div class="pt-page address-edit-wrapper ng-cloak" switch-page="addressState == 1">
            <div class="address-edit-inner">
                <ul class="address-edit-list">
                    <li ng-repeat="add in AddressService.list | orderBy:'AddressId'" ng-class="{selected:add.IsDefault}">
                         <label ng-click="setDefault(add)"><i class="icon-checkBox-selected2" ></i></label>
                        <div class="text-area"  ng-click="editAddress(add.AddressId)">
                            <h5>{{add.Recipient}} {{add.Mobile}}</h5>
                            <div>
                                {{add.Address1}} {{add.Details}}
                            </div>
                            <i class="icon-arrow-right"></i>
                        </div>

                    </li>

                </ul>
                <div class="btn-group">
                    <button class="btn btn-primary btn-full" ng-click="insterAddress()">新增地址</button>
                </div>
            </div>
        </div>
        <!---->
        <div class="pt-page address-edit-wrapper ng-cloak" switch-page="addressState == 2">
            <div class="address-edit-inner">
                <div class="address-form">
                    <p class="input-group">
                        <input type="text" value="" ng-model="AddressService.item.Recipient" placeholder="收货人"></p>
                    <p class="txt_msg">请务必填写真实的收货人姓名，海关清关时将核对姓名</p>
                    <p class="input-group">
                        <input type="text" value="" ng-model="AddressService.item.Mobile" placeholder="手机号码"></p>
                        <p class="input-group three-section">
                         <span class="">
                            <select ng-model="AddressService.item.ProvinceName" ng-options="act.name as act.name for act in AddressService.cityObj[0]" ng-change="AddressService.selectCity()" >
                                <option value="">选择省份</option>
                            </select>
                        </span>
                        <span class="">
                            <select ng-model="AddressService.item.CityName" ng-options="act.name as act.name for act in AddressService.selectCityObj" ng-change="AddressService.areaCity()" >
                                <option value="" >选择城市</option>
                            </select>
                        </span>
                        <span class="">
                            <select ng-model="AddressService.item.DistrictName" ng-options="act.name as act.name for act in AddressService.selectDistrictObj">
                                <option value="">选择县区</option>
                            </select>
                        </span>
                    </p>
                    <p class="input-group">
                        <input type="text" value="" ng-model="AddressService.item.Details" placeholder="详细地址"/></p>
                    <p class="input-group">
                        <input type="text" value="" ng-model="AddressService.item.PostCode" placeholder="邮政编号"/></p>
                    <!-- <p class="input-group"  ng-if="!AddressService.hasEmail">
                        <input type="email" value="" ng-model="AddressService.item.Email" placeholder="电子邮件地址（e-mail）"/></p> -->
                    <p class="input-group selectDefault">
                        <label class="label" ng-click="AddressService.item.IsDefault = !AddressService.item.IsDefault">
                        <i class="icon-checkBox-selected2" ng-class="{'selected':AddressService.item.IsDefault}" ></i>
                        设置为默认收货地址</label>
                    </p>
                </div>
                <div class="btn-group" ng-if="!AddressService.item.AddressId">
                    <button class="btn btn-primary btn-full" ng-click="saveAddress()">保存</button>
                </div>
                <div class="btn-group" ng-if="AddressService.item.AddressId">
                    <div class="btn-group-col_2">
                        <button type="button" class="btn btn-border-primary btn-white btn-full" ng-click="deleteAddress(AddressService.item.AddressId)">删除</button>
                    </div>
                    <div class="btn-group-col_2">
                        <button class="btn btn-primary btn-full" ng-click="saveAddress()">保存</button>
                    </div>
                </div>

            </div>
        </div>

        <div class="ymtui-dialog-mask"></div>
    </section>
    <!-- Google Tag Manager -->
    <!-- Google Tag Manager --> 
    <script> 
        (function(w, d, s, l, i, o) { 
            w['YmatouAnalyticsobject'] = o; 
            w[o] = w[o] || function () { 
            (w[o].q = w[o].q || []).push(arguments) 
            } 

            w[l] = w[l] || []; 
            w[l].push({ 
            'gtm.start': new Date().getTime(), 
            event: 'gtm.js' 
            }); 
            var f = d.getElementsByTagName(s)[0], 
            j = d.createElement(s), 
            dl = l != 'dataLayer' ? '&l=' + l : ''; 
            j.async = true; 
            j.src = '//www.googletagmanager.com/gtm.js?rnd=' + Date.now()+''+Math.random()*1E16 + '&id=' + i + dl; 
            f.parentNode.insertBefore(j, f); 
        })(window, document, 'script', 'dataLayer', 'GTM-TXC7VJ', '_dc_'); 
    </script> 
    <!-- End Google Tag Manager --> 
    <script src="http://static.jyh.ymatou.com/commons/js/jweixin.2015110601.js"></script>
    <!-- build:js /scripts/YmtApi.js -->
    <script src="/scripts/YmtApi.js"></script>
    <!-- endbuild -->
    <!-- build:js /scripts/vendor/zepto,angular.js -->
    <script src="/scripts/vendor/zepto.min.js"></script>
    <script src="/scripts/vendor/angular.min.js"></script>
    <!-- endbuild -->
    <!-- build:js /scripts/settle-app_min.js -->
    <script src="/scripts/ymt.UI.js"></script>
    <script src="/scripts/settle_app.js"></script>
    <!-- endbuild -->
</body>
</html>
